<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="keywords" content="L-charging">
  <meta name="description" content="Lcharger -- 奥升云平台">
  <link rel="icon" href="<%= BASE_URL %>favicon.png">

  <title>
    <%= VUE_APP_TITLE %>
  </title>
  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    }

    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
    }

    #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #00d591;
      -webkit-animation: spin 2s linear infinite;
      -ms-animation: spin 2s linear infinite;
      -moz-animation: spin 2s linear infinite;
      -o-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      z-index: 1001;


    }

    #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #00ba9e;
      -webkit-animation: spin 3s linear infinite;
      -moz-animation: spin 3s linear infinite;
      -o-animation: spin 3s linear infinite;
      -ms-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
    }

    #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #00bab6;
      -moz-animation: spin 1.5s linear infinite;
      -o-animation: spin 1.5s linear infinite;
      -ms-animation: spin 1.5s linear infinite;
      -webkit-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite;
    }

    #loader-wrapper .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      background: #EDF3F3;
      z-index: 1000;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    #loader-wrapper .loader-section.section-left {
      left: 0;
    }

    #loader-wrapper .loader-section.section-right {
      right: 0;
    }


    .loaded #loader-wrapper .loader-section.section-left {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }

    .loaded #loader-wrapper {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
    }

    .no-js #loader-wrapper {
      display: none;
    }

    .no-js h1 {
      color: #222222;
    }

    #loader-wrapper .load_title {
      font-family: 'Open Sans';
      color: #FFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      top: 60%;
      opacity: 1;
      line-height: 30px;
    }

    #loader-wrapper .load_title span {
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
      color: #FFF;
      opacity: 0.5;
    }

    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        transform: rotate(-360deg);
      }
    }


    .loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 56px;
      height: 56px;
      margin: -28px 0 0 -28px;
      z-index: 1001;

      svg {
        animation: spin 1.5s linear infinite;
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="loader-wrapper">
      <div class="loader">
        <svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
            <pattern id="pattern-nw10j48-17-1" width="100%" height="100%" patternUnits="objectBoundingBox">
              <use xlink:href="#image-nw10j48-17-2"></use>
            </pattern>
            <image id="image-nw10j48-17-2" width="56" height="56" xlink:href=""></image>
          </defs>
          <g id="Orise-奥升" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="画板备份-44" transform="translate(-44.000000, -44.000000)" fill="url(#pattern-nw10j48-17-1)" fill-rule="nonzero">
              <path d="M72,44 C87.463973,44 100,56.536027 100,72 C100,74.5915736 99.6479172,77.1009138 98.988975,79.4827971 L94.3745213,72.2346945 L87.3593984,75.0018595 C87.5481704,74.0303395 87.6470588,73.0267181 87.6470588,72 C87.6470588,63.358368 80.641632,56.3529412 72,56.3529412 C63.358368,56.3529412 56.3529412,63.358368 56.3529412,72 C56.3529412,80.641632 63.358368,87.6470588 72,87.6470588 C77.2617602,87.6470588 81.9169122,85.0498601 84.7534152,81.0675034 L92.1237018,78.1615934 L96.6558586,85.2812616 C91.9250589,94.0452474 82.657933,100 72,100 C56.536027,100 44,87.463973 44,72 C44,56.536027 56.536027,44 72,44 Z" id="形状结合" transform="translate(72.000000, 72.000000) rotate(-32.000000) translate(-72.000000, -72.000000) "></path>
            </g>
          </g>
        </svg>
      </div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
    </div>
  </div>
</body>

</html>
